<template>
  <div class="pr">
    <div
      id="echart7"
      style="width: calc(24vw); height: calc((100vh - 78px - 3vw) / 3);"
    ></div>
    <RepairViewList
      :filters="filters"
      :sub_title="sub_title"
      v-model="dialog_visible"
    />
  </div>
</template>

<script>
import { init, graphic } from "echarts";
import RepairViewList from "./RepairViewList.vue";
export default {
  name: "box7",
  components: {
    RepairViewList,
  },
  data() {
    return {
      dialog_visible: false,
      sub_title: null,
      filters: [],
    };
  },

  myChart: null,
  mounted() {
    this.initCharts();
  },
  methods: {
    async initCharts() {
      let data = await this.$http.get(
        `/api/RepairReport/RepairLargeScreenModelBList`
      );

      let dic = {
        0: "本周",
        1: "上周",
        2: "2周前",
        3: "3周前",
        4: "4周前",
        5: "5周前",
      };

      let chartData = data.slice(0, 6).map((v, index) => ({
        ...v,
        WeekText: dic[index],
        value: v.Count,
      }));

      if (!this.myChart) {
        this.myChart = init(document.getElementById("echart7"));
        this.myChart.on("click", (ev) => {
          this.filters = [
            {
              Name: "ApplyTime",
              compare: ">=",
              value: ev.data.Ds,
            },
            {
              Name: "ApplyTime",
              compare: "<",
              value: ev.data.De,
            },
          ];
          this.sub_title = `${ev.data.Week}(${ev.data.WeekText})`;
          this.dialog_visible = true;
        });
      }
      const option = {
        grid: {
          top: 70,
          let: 0,
          right: 30,
          bottom: 40,
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#013229",
            },
          },
          axisLabel: {
            show: true,
            // rotate: 45,
            hideOverlap: true,
            color: "#fff",
            textStyle: {
              color: "#fff",
            },
          },

          data: chartData.map((v) => v.WeekText),
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#013229",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            type: "line",
            // smooth: true,
            symbolSize: 5,
            // lineStyle: {
            //   color: "#04ffce",
            // },
            areaStyle: {
              normal: {
                color: new graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 从上到下变浅
                  [
                    {
                      offset: 0,
                      color: "rgba(4, 255, 206,100)",
                    },
                    {
                      offset: 1,
                      color: "rgba(4, 255, 206,0)",
                    },
                  ],
                  false
                ),
              },
            },
            label: {
              show: true,
              position: "top",
              textBorderColor: "transparent",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: "#04ffdc",
                borderColor: "#fff",
              },
            },
            lineStyle: {
              normal: {
                color: "#04ffdc",
              },
            },
            smooth: false,
            data: chartData,
          },
        ],
        textStyle:{
          fontFamily:'AP'
        }
      };
      this.myChart.setOption(option);
    },
    resize(){
      this.myChart.resize()
    }
  },
};
</script>

<style>
</style>